﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/details.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_759899_b4qat1usesj.css">
</head>
<body>
<div class="container">
    <div class="headers">
    </div>
    <div class="car">
        <hr style="border-top: 2px solid red">
        <div class="car-header">
            <a href="#" class="css">首页</a>>
            <a href="#" class="css">笔记本电脑</a>>
            <span class="little">戴尔</span>
        </div>
        <div class="car-body">
            <div class="car-item">
                <div class="show-bigImg">
                    <img src="images/DELLcomputer.jpg" alt="" style="height: 400px;width: 400px">
                    <img src="images/DELL2.jpg" alt="" style="height: 400px;width: 400px; display:none">
                    <img src="images/DELL3.jpg" alt="" style="height: 400px;width: 400px; display:none">
                    <img src="images/DELL4.jpg" alt="" style="height: 400px;width: 400px; display:none">
                    <img src="images/DELL5.jpg" alt="" style="height: 400px;width: 400px; display:none">
                </div>
                <div class="imgs">
                    <div class="img-item" id="img1"><img src="images/DELLcomputer.jpg" alt=""
                                                         style="height: 70px;width: 68px"></div>
                    <div class="img-item" id="img2"><img src="images/DELL2.jpg" alt="" style="height: 70px;width: 70px">
                    </div>
                    <div class="img-item" id="img3"><img src="images/DELL3.jpg" alt="" style="height: 70px;width: 70px">
                    </div>
                    <div class="img-item" id="img4"><img src="images/DELL4.jpg" alt="" style="height: 70px;width: 70px">
                    </div>
                    <div class="img-item" id="img5"><img src="images/DELL5.jpg" alt="" style="height: 70px;width: 70px">
                    </div>
                </div>
                <i class="iconfont icon-star"></i><a href="#" class="css">关注商品</a>
                <i class="iconfont icon-fenxiang"></i><a href="#" class="css">分享</a>
            </div>
            <div class="car-item">
                <span>王俊凯戴尔DELL游匣G3 15.6英寸游戏本电脑 i5-8300H 8G 1TB+128GB 6G</span>
                <span class="little">【GTX1060 6G独显】\\\"吃鸡\\\"利器瞄准游戏本，游匣爆款推荐</span>
                <div class="price">
                    <span class="little">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <i class="iconfont icon-renminbi">7900</i>
                </div>
                <span class="little">配&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span class="hover">湖南 <i class="iconfont icon-down-trangle-copy-copy"></i></span>
                <span class="little">可送达</span>
                <a href="#" class="css">去凑单</a>
                <br>
                <span class="little">评&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span class="little">购买评价 <span class="red">31</span></span>
                <span class="little">成交记录 <span class="red">101</span></span>
                <br>
                <span class="little">服务评价:&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="green">正</span>&nbsp;正品保障
                <span class="green">票</span>&nbsp;发票保障
                <span class="iconfont icon-jiaohuan green"></span>&nbsp;无忧退换
                </span>
                <br>
                <span class="little">商品颜色:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span class="select">蓝色</span>
                <br>
                <span class="little">套&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;装:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span class="select">官方标配</span>
                <div class="suit-info">
                    <span class="little">王俊凯戴尔DELL游匣G3</span>
                </div>
                <span class="little s">购买数量:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span id="sub">-</span>
                <input type="text" value="1" id="numShow"/>
                <span id="add">+</span>
                <br>
                <a href="#" class="buy">立即购买</a>
                <a href="#" class="addCar">加入购物车</a>
            </div>
            <div class="car-item">
                <div class="car-little-header">
                    <span>戴尔官方旗舰店</span>
                </div>
                <span class="little">客服电话：4006881999</span>
                <br>
                <br>
                <span class="little">接待时间：9:00-18:00</span>
                <br>
                <br>
                <span class="little">店铺动态评分：</span>
                <br>
                <br>
                <span class="little">描述: <span class="red">5.0</span>&nbsp;&nbsp;&nbsp;<span class="red">持平</span>同行 0.00%</span>
                <br>
                <br>
                <span class="little">服务: <span class="red">5.0</span>&nbsp;&nbsp;&nbsp;<span class="red">持平</span>同行 0.00%</span>
                <br>
                <br>
                <span class="little">物流: <span class="red">5.0</span>&nbsp;&nbsp;&nbsp;<span class="red">持平</span>s同行 0.00%</span>
                <br>
                <br>
                <a href="#" class="css">进入店铺</a><a href="#" class="css">关注店铺</a>
            </div>
        </div>
        <br>
        <br>
        <div class="detail">
            <div class="detail-item">
                <div class="detail-little">
                    <span>搜索店内商品</span>
                </div>
                <div class="detail-list">
                    <dt class="line-height">
                        商品名: <input type="text" class="name"/>
                    </dt>
                    <dl class="line-height">
                        价&nbsp;&nbsp;&nbsp;格:
                        <input type="text" class="price"/>到
                        <input type="text" class="price"/>
                    </dl>
                    <dl class="line-height">
                        <a href="#" class="button">搜索</a>
                    </dl>
                </div>
                <div class="detail-little">
                    <span>商品分类</span>
                </div>
                <div class="detail-list">
                    <dt>查看全部商品</dt>
                    <dl><a href="#" class="css">按关注</a>
                        <a href="#" class="css">按价格</a>
                        <a href="#" class="css">按时间</a>
                    </dl>
                </div>
                <div class="detail-little">
                    <span><i class="iconfont icon-jian"></i>笔记本电脑</span>
                </div>
                <div class="detail-list">
                    <ul>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                    </ul>
                </div>
                <div class="detail-little">
                    <span><i class="iconfont icon-jian"></i>液晶显示器</span>
                </div>
                <div class="detail-list">
                    <ul>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                    </ul>
                </div>
                <div class="detail-little">
                    <span><i class="iconfont icon-jian"></i>显卡</span>
                </div>
                <div class="detail-list">
                    <ul>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                    </ul>
                </div>
                <div class="detail-little">
                    <span><i class="iconfont icon-jian"></i>主板</span>
                </div>
                <div class="detail-list">
                    <ul>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>

                    </ul>
                </div>
                <div class="detail-little">
                    <span><i class="iconfont icon-jian"></i>散热器</span>
                </div>
                <div class="detail-list">
                    <ul>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                        <li><i class="iconfont icon-sanjiaoxing"></i>ASUS(华硕)</li>
                    </ul>
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-header">
                    <a class="button">商品详情</a>
                    <a class="button">参数</a>
                    <a class="button">购买记录 <span class="red">101</span></a>
                    <a class="button">成交记录 <span class="red">31</span></a>
                    <a class="button">购买咨询</a>
                    <a class="button">服务承诺</a>
                    <a class="button">
                        <div class="code"><img src="images/scan.png" alt="" style="width: 38px;height: 38px;"></div>
                        <span class="red">手机购买 <i class="iconfont icon-down-trangle-copy-copy"></i></span>
                    </a>
                </div>
                <div class="detail-body">
                    <div class="item">
                        <br>
                        <span class="little">官方标配</span>
                        <br>
                        <img src="images/title.png" alt="">
                        <img src="images/HARPOON.jpg" alt="">
                        <img src="images/HARPOON.jpg" alt="">
                        <img src="images/HARPOON.jpg" alt="">
                    </div>
                    <div class="item">
                        <p><span class="circle"></span>  商品详情</p>
                        <br>
                        <br>
                        <p><span class="circle"></span>  服务详情</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footers">

    </div>
</div>
</body>
</html>
<script>
    $(function () {
        $(".footers").load("footer.html");

        $(".headers").load("header.html", function () {
            $("#classify").mouseenter(function () {
                $(".swiper-nav").show();
            });
            $(".swiper-nav").mouseleave(function () {
                $(".swiper-nav").hide();
            })

        });


//        图片的切换
        $(".img-item").click(function () {
            $(this).css({
                "border": "2px solid #c00"
            }).siblings().css({
                "border": "none"
            })
        });
        $("#img1").click(function () {
            $(".show-bigImg img:nth-child(1)").show().siblings().hide();
        });
        $("#img2").click(function () {
            $(".show-bigImg img:nth-child(2)").show().siblings().hide();
        });
        $("#img3").click(function () {
            $(".show-bigImg img:nth-child(3)").show().siblings().hide();
        });
        $("#img4").click(function () {
            $(".show-bigImg img:nth-child(4)").show().siblings().hide();
        });
        $("#img5").click(function () {
            $(".show-bigImg img:nth-child(5)").show().siblings().hide();
        });

//        购物车的加减
        var t = $("#numShow");
        $("#add").click(function () {
            t.val(parseInt(t.val()) + 1);
            $("#sub").removeAttr("disabled");                 //当按加1时，解除$("#min")不可读状态
//            setTotal();
        });
        $("#sub").click(function () {
            if (parseInt(t.val()) > 1) {                     //判断数量值大于1时才可以减少
                t.val(parseInt(t.val()) - 1)
            } else {
                $("#sub").attr("disabled", "disabled")        //当$("#min")为1时，$("#min")不可读状态
            }
//            setTotal();
        });

//        导航栏切换
        $(".container .car .detail .detail-item:last-child .detail-header a").click(function () {
            $(this).css({
                "borderTop":"2px solid #c9302c",
                "backgroundColor":"white"
            }).siblings().css({
                "borderTop":"none",
                "backgroundColor":"#F7F7F7"
            })
        })
    })
</script>